export const genProps = (defaultProps, options) => {
	let props = $.extend({}, defaultProps);
	if (options) {
		for (let field in defaultProps) {
			if (typeof options[field] !== 'undefined') {
				props[field] = options[field];
			}
			let propsFn = options[`${ field }Fn`];
			if (typeof propsFn === 'function') {
				props[field] = propsFn(options);
			}
		}
	}
	for (let field in defaultProps) {
		if (props[field] === null) {
			delete props[field];
		}
	}
	return props;
};

export const ElDialog = {
	title: null,
	width: '50%',
	fullscreen: false,
	top: '1vh',
	modal: false,
	modalAppendToBody: true,
	appendToBody: false,
	lockScroll: true,
	customClass: null,
	closeOnClickModal: false,
	closeOnPressEscape: false,
	showClose: true,
	beforeClose: null,
	center: false,
};

export const ElButton = {
	size: null,
	type: null,
	plain: false,
	round: false,
	circle: false,
	disabled: false,
	icon: null,
	autofocus: false,
	nativeType: 'button',
};

export const ElTooltip = {
	effect: 'dark',
	content: null,
	placement: 'bottom',
	value: false,
	disabled: false,
	offset: 0,
	transition: 'el-fade-in-linear',
	visibleArrow: true,
	popperOptions: {
		boundariesElement: 'body',
		gpuAcceleration: false
	},
	openDelay: 0,
	manual: false,
	popperClass: null,
	enterable: true,
	hideAfter: 0,
	tabindex: 0,
};

export const ElDropdown = {
	type: null,
	size: null,
	splitButton: false,
	placement: 'bottom-end',
	trigger: 'hover',
	hideOnClick: true,
	showTimeout: 250,
	hideTimeout: 150,
	tabindex: 0,
	disabled: false,
	listenerEvent: {
		click: null,
		command: null,
		visibleChange: null,
	},
	slots: {
		dropdown: null,
	},
};

export const ElDropdownItem = {
	command: null,
	disabled: false,
	divided: false,
	icon: null,
};

export const ElTree = {
    data: null,
    emptyText: null,
    nodeKey: null,
    props: {
        label: 'label',
        children: 'children',
        disabled: false,
        isLeaf: false,
    },
    renderAfterExpand: true,
    load: null,
    renderContent: null,
    highlightCurrent: false,
    defaultExpandAll: false,
    expandOnClickNode: true,
    checkOnClickNode: false,
    autoExpandParent: true,
    defaultExpandedKey: null,
    showCheckBox: false,
    checkStrictly: false,
    defaultCheckedKey: null,
    currentNodeKey: null,
    filterNodeMethod: null,
    accordion: false,
    indent: 16,
    iconClass: null,
    lazy: false,
    draggable: false,
    allowDrag: null,
    allowDrop: null,
	listenerEvent: {
		nodeClick: null,
		nodeContextmenu: null,
		checkChange: null,
		check: null,
		currentChange: null,
		nodeExpand: null,
		nodeCollapse: null,
		nodeDragStart: null,
		nodeDragEnter: null,
		nodeDragLeave: null,
		nodeDragOver: null,
		nodeDragEnd: null,
		nodeDrop: null,
	},
	slots: {
		default: null,
	},
};

export const ElPagination = {
	small: false,
	background: false,
	pageSize: 10,
	total: null,
	pageCount: null,
	pagerCount: 7,
	currentPage: 1,
	layout: 'prev, pager, next, jumper, ->, total',
	pageSizes: [10, 20, 30, 40, 50, 100],
	popperClass: null,
	prevText: null,
	nextText: null,
	disabled: false,
	hideOnSinglePage: false,
	listenerEvent: {
		sizeChange: null,
		currentChange: null,
		prevClick: null,
		nextClick: null,
	},
	slots: {
		default: null,
	},
};

export const ElAlert = {
	title: null,
	type: 'info',
	description: null,
	closable: true,
	center: true,
	closeText: null,
	showIcon: false,
	effect: 'light',
	listenerEvent: {
		close: null,
	},
	slots: {
		title: null,
	},
};

export const ElTag = {
	type: null,
	closable: false,
	disableTransitions: false,
	hit: false,
	color: null,
	size: null,
	effect: 'light',
	listenerEvent: {
		click: null,
		close: null,
	},
};

export default {
	genProps,
	ElDialog,
	ElButton,
	ElTooltip,
	ElDropdown,
	ElDropdownItem,
    ElTree,
	ElPagination,
	ElAlert,
};
